<template>
  <div class="container">
    <h1 class="title">Dark mode</h1>
    <svg
      id="mode"
      width="55"
      height="55"
      viewBox="0 0 55 55"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      @click="changemode"
    >
      <path
        class="sun"
        d="M55 27.5C55 42.6878 42.6878 55 27.5 55C12.3122 55 0 42.6878 0 27.5C0 12.3122 12.3122 0 27.5 0C42.6878 0 55 12.3122 55 27.5Z"
        fill="#01D8D8"
      />
    </svg>
  </div>
</template>

<script>
// import anime from "animejs";
export default {
  data() {
    return {
      toggleFlag: false,
      moonpath:
        "M17.5 27.5C17.5 42.6878 27.5 55 27.5 55C12.3122 55 0 42.6878 0 27.5C0 12.3122 12.3122 0 27.5 0C27.5 0 17.5 12.3122 17.5 27.5Z",
      sunpath:
        "M55 27.5C55 42.6878 42.6878 55 27.5 55C12.3122 55 0 42.6878 0 27.5C0 12.3122 12.3122 0 27.5 0C42.6878 0 55 12.3122 55 27.5Z",
    };
  },
  methods: {
    changemode() {
      this.toggleFlag = !this.toggleFlag;
      const timeline = this.anime.timeline({
        duration: 750,
        essing: "easeOutExpo",
      });
      timeline
        .add({
          targets: ".sun",
          d: [
            {
              value: this.toggleFlag ? this.moonpath : this.sunpath,
            },
          ],
          fill: this.toggleFlag ? "#f1c40f" : "#01D8D8",
        })
        .add(
          {
            targets: "#mode",
            rotate: this.toggleFlag ? 200 : 0,
          },
          100
        )
        .add(
          {
            targets: ".container",
            background: this.toggleFlag ? "#34495e" : "#ecf0f1",
          },
          100
        )
        .add(
          {
            targets: ".title",
            color: this.toggleFlag ? "#ecf0f1" : "#34495e",
          },
          100
        );
    },
  },
};
</script>

<style scoped>
.container {
  height: 100vh;
  width: 100%;
  background: #ecf0f1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
h1 {
  color: #34495e;
}
svg {
  cursor: pointer;
}
</style>
